<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px"
             style="width: 100%; padding: 0 30px;">

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="单位名称" prop="name">
            <el-input v-model="temp.name"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位地址" prop="address">
            <el-input v-model="temp.address"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法人代表" prop="mhLegalPerson">
            <el-input v-model="temp.mhLegalPerson"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="登录账号" prop="loginname">
            <el-input v-model="temp.loginname"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码" prop="password">
            <el-input v-model="temp.password"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人" prop="mhLinkman">
            <el-input v-model="temp.mhLinkman"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="mhPhone">
            <el-input v-model="temp.mhPhone"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组织机构代码" prop="mhOrgCode">
            <el-input v-model="temp.mhOrgCode"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="mhEmail">
            <el-input v-model="temp.mhEmail"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="选择类别" prop="categoryId">
            <el-cascader
              v-model="temp.categoryId"
              :options="allCategoryData"
              :props="{children:'mhCategoryList', label:'name', value:'id' ,multiple: true}"
              style="width:100%;"
            ></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="color: red;">{{result}}</div>
  </div>
</template>

<script>
  import {createBidderApi, fetchList, treeProjCategory} from './api'
  // 导入多选项组件
  import SelectOption from '@/views/coding/components/SelectOption'

  export default {
    name: 'Unit-MhUnit-FormDetail',

    components: { SelectOption },

    props: {
      isModule: {
        type: Boolean,
        default: false
      },
      row: {}
    },

    data() {
      var checkMobile = (rule,value,cb)=>{
        const regMobile =  /^[1][3,4,5,7,8][0-9]{9}$/;
        if(regMobile.test(value)){
          return cb()
        }
        cb(new Error("只能输入11位手机号"))
      };
      return {
        rules: {
          // mhLegalPerson: [{ required: true, message: '请输入法人代表', trigger: 'blur' }],
          mhBizLicenseSignpic: [{ required: true, message: '请上传社会信用统一代码证', trigger: 'blur' }],
          /* status: [{ required: true, message: 'required', trigger: 'blur' }],*/
          name: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
          loginname: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
          mhLinkman: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
          mhPhone: [{ required: true, message: '请输入手机号', trigger: 'blur' }, {validator:checkMobile,trigger: 'blur'}],
          categoryId:[{ required: true, message: '请选择类别', trigger: 'blur' }],
          mhEmail:[{ required: true, message: '输入邮箱', trigger: 'blur' }],

        },

        dialogVisible: false,
        temp: {
        },
        licenseSignpicArr:[],
        result:'',
        allCategoryData:[],
        categoryIds:''
      }
    },

    watch: {
      'row': {
        immediate: true, // vue首次赋值不触发watch的解决方法
        handler: function(nval) {
          if (this.isModule) {
            // this.temp = Object.assign({}, this.row) // copy obj
            if (this.isNull(nval)) {
              return
            }
            if (this.isNull(nval.id)) {
              return
            }
            this.getList(nval.id)
          }
        }
      }
    },
    mounted() {
      this.treeProjCategory(0)
    },
    methods: {
      treeProjCategory(id){
        treeProjCategory({id:id}).then(r=>{
          this.allCategoryData = r.obj.mhCategoryList
        })
      },
      /*categoryIdEvent(val) {
        if (val===undefined) return
        this.temp.categoryIds = val[val.length-1]
      },*/
      getList(_id) {
        this.resetTemp()
        fetchList({ id: _id }).then(result => {
          if (!result.success) {
            this.notify(result)
            return
          }
          this.temp = result.map.rows[0]
        })
      },
      // 给外部调用，清空form
      resetTemp() {
        this.temp = {
          legalPerson: '',
          // bizLicenseSignpic: '',
          status: 2,
          name: '',
          account: '',
          password: '',
          linkman: '',
          telephone: '',
          categoryIds:'',
          mhEmail:'',
/*          phone: '',
          fax: '',
          email: '',*/
          deleteflag: '',
          id: undefined
        };
        // this.licenseSignpicClearFiles();
      },
      // 给外部调用，设置默认值，请根据实际情况修改id值
      defaultTemp() {
        this.temp = {
          status: 2, //设置默认值
          deleteflag: 0 //设置默认值
        }
      },
      // 树表： 拿当前节点ID作为父节点ID，建立树关系
      setParentNodeId(id) {
        // this.temp.mhUnitId = id
        this.temp.parentId = id
      },
      // 给外部调用，插入记录
      createData() {

        let datas = '';
        this.temp.categoryId.forEach(item=>{
          let index = item.length-1;
          if(index>=0) {
            let data = item[index]
            datas =  datas+data+",";
          }
        })
        if(datas.length>0){
          datas = datas.substr(0,datas.length-1)
        }

        this.temp.categoryIds = datas

        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const param = Object.assign({}, this.temp)
            createBidderApi(param).then((r) => {
              this.notify(r)
              if (r.success) {
                this.resetTemp()
                // 从父组件调用此方法，进行回调下
                if (this.isModule) {
                  this.$emit('createResult')
                }
              }
            })
          }
        })
      },
      // 给外部调用，清除校验
      clearValidate() {
        this.$refs['dataForm'].clearValidate()
      },

    }

  }
</script>
<style>

</style>
